<template>
  <div class="trend">
    <mt-swipe :auto="4000" :slides-per-view="3" class="list">
      <mt-swipe-item v-for="(item, key) in list" :key="key" class="item">
        <div class="inner">
          <div v-for="(child, index) in item" :key="index">
            <nuxt-link
              v-if="realTimeQuotesBySymbol[child.money]"
              :to="`/kline?symbol=${child.stock+child.money}`"
              :class="[flag(realTimeQuotesBySymbol[child.money][child.stock+child.money])?'green':'red']"
            >
              <div class="label">{{ child.stock }}/{{ child.money }}</div>
              <div v-if="realTimeQuotes[child.stock+child.money]" class="value">
                {{ realTimeQuotes[child.stock+child.money].last | priceFormat(coinPairInfo[`${child.stock}${child.money}`].decimals) }}
              </div>
              <div class="prop">
                {{ realTimeQuotesBySymbol[child.money][child.stock+child.money] | fluctuation }}
              </div>
              <div>≈ {{ currency.symbol }} {{ (child.stock+child.money) | currencyPrice('last') | numberFormat() }}</div>
            </nuxt-link>
            <div v-else class="spinner-wrap">
              <mt-spinner type="triple-bounce" class="spinner"></mt-spinner>
            </div>
          </div>
        </div>
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  data () {
    return {
      list: []
    }
  },
  computed: {
    ...mapState({
      currency: ({ currency }) => currency,
      realTimeQuotes: ({ market }) => market.realTimeQuotes,
      coinPairInfo: ({ market }) => market.coinPairInfo
    }),
    ...mapGetters({
      realTimeQuotesBySymbol: 'market/realTimeQuotesBySymbol'
    }),
    hasData () {
      if (this.list.length > 0 &&
      JSON.stringify(this.currency) !== '{}' &&
      JSON.stringify(this.realTimeQuotes) !== '{}' &&
      JSON.stringify(this.realTimeQuotesBySymbol) !== '{}') {
        return true
      }
      return false
    }
  },
  created () {
    this.getRecommend({ type: 2 })
      .then((data) => {
        const result = []
        for (let i = 0; i < data.data.length; i += 3) {
          result.push(data.data.slice(i, i + 3))
        }
        this.list = result
      })
      .catch((data) => {
        this.$toast.error(data.msg)
      })
  },
  methods: {
    ...mapActions({
      getRecommend: 'getRecommend'
    }),
    flag (value) {
      if (typeof value !== 'undefined' && JSON.stringify(value) !== '{}' && value.last && value.open) {
        return value.last >= value.open
      } else {
        return false
      }
    }
  }
}
</script>
<style scoped>
.trend {
  overflow: hidden;
  border-bottom: 5px solid #f0f3f8;
  height: 120px;
}
.spinner-wrap {
  height: 90px;
  line-height: 90px;
}
.item {
  padding: 15px 0;
  text-align: center;
  font-weight: 500;
}
.item .inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.item .inner > div {
  flex: 1 0 0
}
.label {
  font-size: 12px;
  color: #444444;
}
.value {
  font-size: 18px;
  margin: 0.2em 0;
  color: #d14b64;
}
.prop {
  font-size: 12px;
  color: inherit;
}
.green .value, .green .prop {
  color: #03ac8f !important;
}
.red .value, .red .prop {
  color: #d14b64 !important;
}

</style>
<style>
.trend .mint-swipe-indicators {font-size: 0;}
.trend .mint-swipe-indicator {
  width: 10px;height: 2px;
  margin: 0;border-radius: 0;
  transition: 0.3s;
}
.trend .mint-swipe-indicator.is-active {
  background: #1b8afe;
  opacity: 1;
}
</style>
